import { UploadOutlined } from "@ant-design/icons";
import TabPane from "@ant-design/pro-card/lib/components/TabPane";
import ProForm, { DrawerForm, ModalForm, ProFormCheckbox, ProFormDatePicker, ProFormDateTimePicker, ProFormDigit, ProFormGroup, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-form"
import { PageContainer } from "@ant-design/pro-layout"
import ProTable, { ProColumns } from "@ant-design/pro-table"
import { Avatar, Button, Card, Col, Descriptions, List, Row, Tabs, Timeline, Upload } from "antd";
import { useState } from "react";

export default () => {
  const [activeKey,setActiveKey] = useState("tab1");
  const [showDetail,setShowDetail] = useState(false);
  const [showCreator,setShowCreator] = useState(false);
  const [tabKey,setTabKey] = useState("1");
  const [showFollow,setShowFollow] = useState(false);

  const [fileList,setFileList] =useState<any>([]);
  const [dataList,setDataList] =useState<any>([
    {
      
    },
    {

    }
  ]);
  const aColumn:ProColumns[] = [
    {
      title:'跟进方式',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      renderText:()=>'打电话'
    },
    {
      title:'跟进内容',
      dataIndex: 'name12',
      ellipsis:true,
      renderText:()=>'线下拜访了客户'
    },
    {
      title:'跟进时间',
      dataIndex: 'name123',
      ellipsis:true,
      renderText:()=>'2023-05-10'
    },
    {
      title:'下次联系时间',
      dataIndex: 'date3',
      width:100,
      renderText:()=>'2023-05-12'
    },
  ]
  const bColumn:ProColumns[] = [
    {
      title:'姓名',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      renderText:()=>'张三'
    },
    {
      title:'手机',
      dataIndex: 'name12',
      ellipsis:true,
      renderText:()=>'15115115123'
    },
    {
      title:'职务',
      dataIndex: 'name123',
      ellipsis:true,
      renderText:()=>'采购部经理'
    },
    {
      title:'备注',
      dataIndex: 'date3',
      width:100,
      renderText:()=>'首页联系人'
    },
  ]

  const cColumn:ProColumns[] = [
    {
      title:'商机名称',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      renderText:()=>'北京XXX医院采办'
    },
    {
      title:'商机金额',
      dataIndex: 'name12',
      ellipsis:true,
      renderText:()=>'56,738.00'
    },
    {
      title:'客户名称',
      dataIndex: 'name123',
      ellipsis:true,
      renderText:()=>'xxxxx人民医院'
    },
    {
      title:'商机阶段',
      dataIndex: 'date3',
      width:100,
      renderText:()=>'方案/报价'
    },
  ]
  const eColumn:ProColumns[] = [
    {
      title:'期数',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      renderText:()=>'1'
    },
    {
      title:'客户名称',
      dataIndex: 'name123',
      ellipsis:true,
      renderText:()=>'xxxxx人民医院'
    },
    {
      title:'合同编号',
      dataIndex: 'name12',
      ellipsis:true,
      renderText:()=>'Qxxxx0001'
    },
    {
      title:'计划回款金额',
      dataIndex: 'date3',
      valueType:'money',
      width:120,
      renderText:()=>'33000'
    },
    {
      title:'计划回款日期',
      dataIndex: 'date4',
      width:120,
      renderText:()=>'2023-04-20'
    },
    {
      title:'计划回款方式',
      dataIndex: 'date3',
      width:120,
      renderText:()=>'网上转账'
    },
    {
      title:'回款状态',
      dataIndex: 'date4',
      width:120,
      renderText:()=>'已回款'
    },
  ]

  const fColumn:ProColumns[] = [
    {
      title:'报价编码',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      renderText:()=>'SO.202301020312001'
    },
    {
      title:'报价名称',
      dataIndex: 'name',
      ellipsis:true,
      width:200,
      renderText:()=>'人民医院第一次报价'
    },
    {
      title:'关联商机',
      dataIndex: 'name',
      ellipsis:true,
      width:200,
      renderText:()=>'SJ2001'
    },
    {
      title:'报价日期',
      dataIndex: 'name',
      ellipsis:true,
      width:100,
      renderText:()=>'2023-05-04'
    },
    {
      title:'报价状态',
      dataIndex: 'name',
      ellipsis:true,
      width:100,
      renderText:()=>'已生成合同'
    },
    
  ]

  const dColumn:ProColumns[] = [
    {
      title:'合同编码',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      renderText:()=>'SO.202301020312001'
    },
    {
      title:'客户名称',
      dataIndex: 'name',
      ellipsis:true,
      width:100,
      renderText:()=>'人民医院'
    },
    {
      title:'合同状态',
      dataIndex: 'name9',
      valueType:'select',
      width:100,
      valueEnum:{
        '1':'执行中',
        '2':'待签约',
        '3':'完毕',
      },
      renderText:()=>'执行中'
    },
    {
      title:'开始日期',
      dataIndex: 'date1',
      width:150,
      renderText:()=>'2023-01-01'
    },
    {
      title:'结束日期',
      dataIndex: 'date2',
      width:150,
      renderText:()=>'2023-08-01'
    },
    {
      title:'合同金额',
      dataIndex: 'price',
      ellipsis:true,
      valueType:'money',
      width:150,
      renderText:()=>'100000'
    },
  ]

  const columns:ProColumns[] = [
    {
      title:'客户名称',
      dataIndex: 'name',
      width:150,
      ellipsis:true,
      renderText:()=>'上海XXXX人民医院'
    },
    {
      title:'客户来源',
      dataIndex: 'name1',
      valueType:'select',
      width:100,
      valueEnum:{
        '1':'展会',
        '2':'搜索引擎',
        '6':'客户介绍',
        '3':'电话咨询',
        '4':'广告',
        '5':'官网',
      },
      renderText:()=>'电话咨询'
    },
    {
      title:'联系电话',
      width:120,
      dataIndex: 'name2',
      renderText:()=>'13123456789'
    },
    {
      title:'客户行业',
      dataIndex: 'name3',
      width:100,
      renderText:()=>'医院'
    },
    {
      title:'客户级别',
      dataIndex: 'name4',
      valueType:'select',
      width:120,
      renderText:()=>'A(重点客户)',
      valueEnum:{
        'A(重点客户)':'A(重点客户)',
        'B(普通客户)':'B(普通客户)',
        'C(非优先客户)':'C(非优先客户)',
      },
    },
    {
      title:'成交状态',
      dataIndex: 'name5',
      valueType:'select',
      width:100,
      renderText:()=>'未成交',
      valueEnum:{
        '未成交':'未成交',
        '已成交':'已成交'
      },
    },
    {
      title:'累计拜访次数',
      dataIndex: 'name2',
      width:100,
      hideInSearch:true,
      renderText:()=>'3'
    },
    {
      title:'最近拜访日期',
      hideInSearch:true,
      width:100,
      dataIndex: 'name4',
      renderText:()=>'2023-05-10'
    },
    {
      title:'负责人',
      hideInSearch:true,
      width:100,
      dataIndex: 'name8',
      renderText:()=>'李四'
    },
    {
      title:'创建人',
      hideInSearch:true,
      width:100,
      dataIndex: 'name8',
      renderText:()=>'张三'
    },
    {
      title: "操作",
      valueType: 'option',
      width:100,
      render: (text, record:any,_, action) => [
       <a key="b2" onClick={()=>setShowDetail(true)}>详情</a>
      ]
    }
  ]

  const data = [
    {
      title: '王主任',
    },

  ];


  return (
    <PageContainer>
           <ProTable
      headerTitle=''
      pagination={{
        pageSizeOptions:['20', '100', '500']
      }}
      toolBarRender={() => [
        <Button
                    type='primary'
                    key='new'
                    onClick={() => {
                      setShowDetail(true)
                    }}
                    >新增
                    </Button>
      ]
        }
     dataSource={dataList}
      scroll={{x:1200}}
      columns={columns}
      rowKey="id"
      search={{span:7}}
      toolbar={{
        settings: [],
      }}
      />
      <DrawerForm title='详情' width={'80%'} labelCol={{style:{width:120}}} labelAlign="left" layout="horizontal" visible={showDetail}  onVisibleChange={v=>{setShowDetail(v)}}  drawerProps={{
          destroyOnClose:true,
          forceRender:true,
        }}>
           <Descriptions title="客户信息" column={3} size="small" labelStyle={{width:120}} bordered>
                <Descriptions.Item label="客户名称">北京XXXX医院</Descriptions.Item>
                <Descriptions.Item label="客户界别">B(普通客户)</Descriptions.Item>
                <Descriptions.Item label="创建日期">2022-07-23</Descriptions.Item>
                <Descriptions.Item label="姓名">张三</Descriptions.Item>
                <Descriptions.Item label="职称">主任医师</Descriptions.Item>
                <Descriptions.Item label="性别">男</Descriptions.Item>
                {/* <Descriptions.Item label="兴趣爱好">喝茶</Descriptions.Item>
                <Descriptions.Item label="性格特点">分析型、亲和型</Descriptions.Item> */}
         </Descriptions>
         <div style={{fontWeight:'bold',fontSize:16,marginBottom:10,marginTop:10}}>拜访信息</div>
          <ProFormGroup>
                 <ProFormCheckbox.Group name='target' width={'md'}  label='拜访对象' options={['临床科室','设备科','院领导','决策人']}/>
          </ProFormGroup>

         <div style={{padding:'10px 0',fontSize:16,fontWeight:'bold'}}>拜访记录</div>
         <ProFormSelect width={'lg'} label='拜访时长' name='time' options={[{label:'15分钟',value:15},{label:'30分钟',value:30},
        {label:'一小时',value:60},{label:'2小时',value:120},{label:'3小时',value:180}]}/>
          <ProFormGroup>
            <ProFormTextArea width={'lg'} label='客户意见' name="content1"></ProFormTextArea>
            <div style={{marginBottom:60}}>
               <Button type='primary' >常用模版</Button>
            </div>
          </ProFormGroup>
         <ProFormTextArea width={'lg'} label='沟通纪要' name="content2"></ProFormTextArea>
      </DrawerForm>

    </PageContainer>)
}